<template>
    <div class="page-wrap">
        <div class="filter-wrap">
            <div class="flex-wrap">
                <div class="label-wrap">查询编号:</div> 
                <el-input v-model="searchStr" placeholder="Please input" />
            </div>
             <div class="flex-wrap">
                <div class="label-wrap">日期查询:</div> 
                 <el-date-picker
                    v-model="searchDateTime"
                    type="daterange"
                    range-separator="To"
                    start-placeholder="Start date"
                    end-placeholder="End date"
                >
                </el-date-picker>
            </div>
            <div>
                <el-button @click="handleSearchBtnClick" type="primary">查询</el-button>
            </div>
        </div>
        <div class="table-wrap">
        <el-table :data="state.filterList.tableDataSouce" style="width: 100%">
            <el-table-column prop="name" label="姓名" width="180" />
            <el-table-column prop="age" label="年龄" width="180" />
            <el-table-column prop="sex" label="性别" />
        </el-table>

        </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useStore } from 'vuex';
import axios from 'axios';

const searchStr = ref('') // { value: ''}
const searchDateTime = ref('') // { value: ''}
// const tabelDataSource = ref([]); // {value: []}

const store = useStore();
const { state, dispatch } = store;
console.log(state)


const handleSearchBtnClick = ()=>{
    const [s, e] = searchDateTime.value;
    // /getRolesList   POST  { searchStr:string, startTime: 时间戳, endTime:时间戳 };
    axios.post('/api/getRolesList', {
        searchStr: searchStr.value,
        startTime: s && s.valueOf(),
        endTime: e && e.valueOf()
    })
        .then((res)=>{
            console.log(res);
            const { data = {} } = res || {};
            const { result = {} } = data;
            // tabelDataSource.value = result.data || [];
            dispatch("updateTabelData", result.data)
            // store.commit("updateTabelData", result.data);
        })
}


</script>
<style scoped>
    .page-wrap{
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        width: 100vw;
        
    }
    .filter-wrap{
        border: 1px solid #ddd;
        min-height: 300px;
    }
    .table-wrap{
        border: 1px solid #ddd;
        flex: 1;
    }
    .flex-wrap{
        display: flex;
    }
    .label-wrap{
        min-width: 100px;
    }
</style>
